<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2021-07-02
  Time: 11:12
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8" />
    <title>
        后台管理系统
    </title>
    <script src="${pageContext.request.contextPath}/echarts/echarts.js"></script>
    <script src="${pageContext.request.contextPath}/echarts/jquery-2.1.0.js"></script>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-A-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/x-admin.css" media="all" />
    <link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">
</head>
<body>
<style type="text/css">
    legend { display: block; width:100px; border-bottom:0px; font-family: "Microsoft YaHei","Helvetica Neue";}
    legend a{ color:#666;} legend a:hover{ text-decoration:none;}
    .layui-table{ font-family: "Microsoft YaHei","Helvetica Neue";}
</style>
<div class="x-body">
    <blockquote class="layui-elem-quote">
        <sapn>${sessionScope.staff.staffname}</sapn>，欢迎使用后台管理系统，
        <span class="f-14">当前登陆店铺是</span>
        <span style="color: teal;font-weight: bolder">${sessionScope.staff.branch.branchname}</span>
    </blockquote>

    <div class="row">

        <div class="col-xs-4 <%--col-sm-4 col-md-2--%>">
            <section class="panel bgys">
                <div class="symbol bgcolor-blue ">
                    <i class="fa iconfont"></i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="店铺总数"><i class="iconfont " data-icon=""></i> <h1 id="branchCount"> </h1> </a>
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="店铺总数"> <i class="iconfont " data-icon=""></i><span>店铺总数</span></a>
                </div>
            </section>
        </div>

        <div class="col-xs-4<%-- col-sm-4 col-md-2 --%>">
            <section class="panel bgys">
                <div class="symbol bgcolor-commred">
                    <i class="fa fa-handshake-o"></i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="员工总数"> <i class="iconfont " data-icon=""></i> <h1 id="staffCount"></h1> </a>
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="员工总数"> <i class="iconfont " data-icon=""></i><span>员工总数</span></a>
                </div>
            </section>
        </div>

        <div class="col-xs-4 <%--col-sm-4 col-md-2--%> ">
            <section class="panel bgys">
                <div class="symbol bgcolor-dark-green">
                    <i class="fa  iconfont"></i>
                </div>

                <div class="value tab-menu" bind="1">
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="商品总数"> <i class="iconfont " data-icon=""></i> <h1 id="goodsCount"></h1> </a>
                    <a href="javascript:;" data-url="user-info.html" data-parent="true" data-title="商品总数"> <i class="iconfont " data-icon=""></i><span>商品总数</span></a>
                </div>

            </section>
        </div>


    </div>
    <fieldset class="layui-elem-field layui-field-title site-title">
        <legend><a name="default">数据统计</a></legend>
    </fieldset>
    <!--相关统计-->
    <div class="row">
        <div class="col-sm-4">
            <section class="panel">
                <div class="panel-heading">
                    商品售价统计
                </div>
                <div class="panel-body">
                    <div class="echarts" id="main" style="height:300px; height:350px"></div>
                    <div class="col-sm-6"></div>
                    <!--<div class="col-sm-6"><div class="echarts" id="years" style="height:300px; height:350px"></div></div>-->
                </div>
            </section>
        </div>
        <div class="col-sm-4">
            <section class="panel">
                <div class="panel-heading">
                    部门人员统计
                </div>
                <div class="panel-body">
                    <div class="echarts" id="area" style="height:300px; height:350px"></div>
                </div>
            </section>
        </div>
        <div class="col-sm-4">
            <section class="panel">
                <div class="panel-heading">
                    商品库存统计
                </div>
                <div class="panel-body">
                    <div class="echarts" id="years" style="height:300px; height:350px"></div>
                </div>
            </section>
        </div>
    </div>
</div>

<script src="${pageContext.request.contextPath}/static/lib/layui/layui.js" charset="utf-8"></script>
<script src="https://www.jq22.com/jquery/echarts-4.2.1.min.js"></script>

<%--<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    layui.use(['layer', 'jquery', 'table'], function () {
        var layer = layui.layer;
        var table = layui.table;
        var $ = layui.jquery;

        alert("111111")

        $.ajax({
            type:'post',
            url:'${pageContext.request.contextPath}/welcome/BranchCount',
            success:function (integer) {
                $('#branchCount').html(integer);
                console.log(integer)
                alert(integer)
                /*var bb1 = Math.round(delAllData[0].sbcount/delAllData[1].scount*10000)/100+"%";
                $('#bookb1').html(" "+bb1);*/
            }
        });

    });
</script>--%>

<script type="text/javascript">

    $.ajax({
        type:'post',
        url:'${pageContext.request.contextPath}/welcome/BranchCount',
        success:function (integer) {
            $('#branchCount').html(integer);
        }
    });

    $.ajax({
        type:'post',
        url:'${pageContext.request.contextPath}/welcome/StaffCount',
        success:function (integer) {
            $('#staffCount').html(integer);
        }
    });

    $.ajax({
        type:'post',
        url:'${pageContext.request.contextPath}/welcome/GoodsCount',
        success:function (integer) {
            $('#goodsCount').html(integer);
        }
    });

    var myChart1 = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option1 = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:['进价','售价']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        color: ['#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
            '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'],
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data:[],
            axisLabel: {
                interval:0,
                rotate:40,
                show: true,
                textStyle: {
                    fontSize: 10
                }
            }
        },
        yAxis: {
            type: 'value',
        },

        series: [
            {
                name:'进价',
                type:'line',
                //stack: '总量',
                data:[]                },
            {
                name:'售价',
                type:'line',
                //stack: '总量',
                data:[]                }
        ]
    };
    $(function(){
        var goodsline=[];    //商品数组（实际用来盛放X轴坐标值）
        var cpriceline=[];    //进价（实际用来盛放Y坐标值）
        var spriceline=[];     //售价
        $.ajax({
            type: "POST",
            url:'${pageContext.request.contextPath}/welcome/sprice',
            dataType: 'json',
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            success: function (data) {
                if(data.data){
                    var obj1 = eval(data.data);
                    for(var i=0;i<obj1.length;i++){
                        goodsline.push(data.data[i].name);
                    }
                    for(var i=0;i<obj1.length;i++){
                        cpriceline.push(data.data[i].cp);
                    }
                    for(var i=0;i<obj1.length;i++){
                        spriceline.push(data.data[i].sp);
                    }
                }
                myChart1.setOption({
                    xAxis: {
                        data: goodsline
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '进价',
                        data: cpriceline
                    },
                        {
                            // 根据名字对应到相应的系列
                            name: '售价',
                            data: spriceline
                        }]
                });
            }
        })
    });
    // 使用刚指定的配置项和数据显示图表。
    myChart1.setOption(option1);
</script>






<script type="text/javascript">
    // 指定图表的配置项和数据
    var myChart2 = echarts.init(document.getElementById('area'));

    // 指定图表的配置项和数据
    var option2 = {
        title: {
            text: '各部门员工统计',
            subtext: '实时更新',
            x: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"  //百分比
        },
        itemStyle: {
            normal: {
                //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                color: function(params) {
                    // build a color map as your need.
                    var colorList = [
                        '#f36f8a','#B5C334','#FCCE10','#E87C25','#27727B',
                        '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                        '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                    ];
                    return colorList[params.dataIndex]
                },
                //以下为是否显示，显示位置和显示格式的设置了

                label: {
                    show: true,
                    position: 'top',
                    //    formatter: '{c}'
                    formatter: '{b}\n{c}'
                }
            }
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            //data: ['PHP', 'JavaScript', 'MySQL', 'jQuery', 'CSS', 'MUI', ]

        },
        series: [{
            name: '部门',
            type: 'pie',
            radius: '55%',
            center: ['50%', '60%'],
            data: [
                /*{value: 19, name: 'PHP'} ,
                {value: 5, name: 'JavaScript'} ,
                {value: 6, name: 'MySQL'} ,
                {value: 10, name: 'jQuery'} ,
                {value: 8, name: 'CSS'} ,
                {value: 2, name: 'MUI'} ,*/
            ],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }]
    };
    $(function (){
        var aaa=[];
        $.ajax({
            type:"POST",
            url:'${pageContext.request.contextPath}/welcome/bing',
            dataType:'json',
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            success: function (data){
                if(data.data){
                    var obj2 = eval(data.data);
                    for(var i=0;i<obj2.length;i++){
                        aaa.push(data.data[i]);
                    }
                }
                myChart2.setOption({
                    series:[{
                        name : '部门',
                        data : aaa
                    }]
                })
            }
        })
    })
    // 使用刚指定的配置项和数据显示图表。
    myChart2.setOption(option2);
</script>




<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart3 = echarts.init(document.getElementById('years'));
    // 指定图表的配置项和数据
    var option3 = {
        title: {
            text: '商品库存统计',
            subtext: '实时更新',
            x: 'center'
        },
        //color: ['#3398DB'],

        tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: [{
            type: 'category',
            data: [],
            axisLabel: {
                alignWithLabel: true,
                interval:0,
                rotate:40,
                show: true,
                textStyle: {
                    fontSize: 10
                }
            }
        }],
        yAxis: [{
            type: 'value'
        }],
        series: [{
            name: '数量',
            itemStyle: {
                normal: {
                    //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                    color: function(params) {
                        // build a color map as your need.
                        var colorList = [
                            '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                            '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD',
                            '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                        ];
                        return colorList[params.dataIndex]
                    },
                    //以下为是否显示，显示位置和显示格式的设置了
                    label: {
                        show: true,
                        position: 'top',
                        //formatter: '{c}'
                        //formatter: '{c}\n{b}'
                    }
                }
            },
            type: 'bar',
            barWidth: '60%',
            data: []
        }]
    };
    $(function (){
        var names=[];
        var nums=[];
        $.ajax({
            type: "POST",
            url:'${pageContext.request.contextPath}/welcome/counts',
            dataType: 'json',
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            success: function (data) {
                console.log(data);
                if(data.data){
                    var obj3 = eval(data.data);
                    for(var i=0;i<obj3.length;i++){
                        names.push(data.data[i].name);
                    }
                    for(var i=0;i<obj3.length;i++){
                        nums.push(data.data[i].Counts);
                    }
                }
                myChart3.setOption({
                    xAxis: {
                        data: names
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '商品库存',
                        data: nums
                    }]
                });
            }
        })
    });
    // 使用刚指定的配置项和数据显示图表。
    myChart3.setOption(option3);

</script>
</body>
</html>
